<template>
  <view class="business-hours-editor">
    <view class="mode-selector">
      <uni-segmented-control 
        :current="currentMode" 
        :values="['简单模式', '高级模式']" 
        @clickItem="switchMode"
        style-type="button"
      />
    </view>

    <!-- 简单模式 -->
    <view v-if="currentMode === 0" class="simple-mode">
      <view class="time-group">
        <view class="group-header">
          <text class="group-title">工作日 (周一至周五)</text>
          <uni-switch 
            :checked="simpleData.workday.isOpen" 
            @change="handleWorkdayToggle"
            :disabled="disabled"
          />
        </view>
        <view v-if="simpleData.workday.isOpen" class="time-picker-row">
          <uni-datetime-picker 
            v-model="simpleData.workday.openTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="simpleData.workday.openTime" 
                placeholder="开始时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
          <text class="time-separator">至</text>
          <uni-datetime-picker 
            v-model="simpleData.workday.closeTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="simpleData.workday.closeTime" 
                placeholder="结束时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
        </view>
      </view>

      <view class="time-group">
        <view class="group-header">
          <text class="group-title">周末 (周六至周日)</text>
          <uni-switch 
            :checked="simpleData.weekend.isOpen" 
            @change="handleWeekendToggle"
            :disabled="disabled"
          />
        </view>
        <view v-if="simpleData.weekend.isOpen" class="time-picker-row">
          <uni-datetime-picker 
            v-model="simpleData.weekend.openTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="simpleData.weekend.openTime" 
                placeholder="开始时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
          <text class="time-separator">至</text>
          <uni-datetime-picker 
            v-model="simpleData.weekend.closeTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="simpleData.weekend.closeTime" 
                placeholder="结束时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
        </view>
      </view>
    </view>

    <!-- 高级模式 -->
    <view v-else class="advanced-mode">
      <view 
        v-for="(day, index) in advancedData.daily" 
        :key="index" 
        class="day-group"
      >
        <view class="group-header">
          <text class="group-title">{{ day.dayName }}</text>
          <uni-switch 
            :checked="day.isOpen" 
            @change="(e) => handleDayToggle(index, e)"
            :disabled="disabled"
          />
        </view>
        <view v-if="day.isOpen" class="time-picker-row">
          <uni-datetime-picker 
            v-model="day.openTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="day.openTime" 
                placeholder="开始时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
          <text class="time-separator">至</text>
          <uni-datetime-picker 
            v-model="day.closeTime"
            type="time"
            :disabled="disabled"
            @change="updateValue"
          >
            <template v-slot:default>
              <uni-easyinput 
                :value="day.closeTime" 
                placeholder="结束时间"
                :disabled="disabled"
                readonly
              />
            </template>
          </uni-datetime-picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';

interface Props {
  modelValue?: string;
  disabled?: boolean;
}

interface Emits {
  (e: 'update:modelValue', value: string): void;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  disabled: false,
});

const emit = defineEmits<Emits>();

const currentMode = ref(0); // 0: 简单模式, 1: 高级模式

const simpleData = reactive({
  workday: {
    isOpen: true,
    openTime: '09:00',
    closeTime: '18:00',
  },
  weekend: {
    isOpen: true,
    openTime: '10:00',
    closeTime: '17:00',
  },
});

const advancedData = reactive({
  daily: [
    { dayName: '周一', isOpen: true, openTime: '09:00', closeTime: '18:00' },
    { dayName: '周二', isOpen: true, openTime: '09:00', closeTime: '18:00' },
    { dayName: '周三', isOpen: true, openTime: '09:00', closeTime: '18:00' },
    { dayName: '周四', isOpen: true, openTime: '09:00', closeTime: '18:00' },
    { dayName: '周五', isOpen: true, openTime: '09:00', closeTime: '18:00' },
    { dayName: '周六', isOpen: true, openTime: '10:00', closeTime: '17:00' },
    { dayName: '周日', isOpen: true, openTime: '10:00', closeTime: '17:00' },
  ],
});

const switchMode = (e: any) => {
  currentMode.value = e.currentIndex;
  updateValue();
};

const handleWorkdayToggle = (e: any) => {
  simpleData.workday.isOpen = e.detail.value;
  updateValue();
};

const handleWeekendToggle = (e: any) => {
  simpleData.weekend.isOpen = e.detail.value;
  updateValue();
};

const handleDayToggle = (index: number, e: any) => {
  advancedData.daily[index].isOpen = e.detail.value;
  updateValue();
};

const updateValue = () => {
  let value = '';
  if (currentMode.value === 0) {
    // 简单模式
    value = JSON.stringify(simpleData);
  } else {
    // 高级模式
    value = JSON.stringify(advancedData);
  }
  emit('update:modelValue', value);
};

const parseValue = (value: string) => {
  if (!value) return;
  
  try {
    const data = JSON.parse(value);
    if (data.workday && data.weekend) {
      // 简单模式数据
      currentMode.value = 0;
      Object.assign(simpleData, data);
    } else if (data.daily && Array.isArray(data.daily)) {
      // 高级模式数据
      currentMode.value = 1;
      Object.assign(advancedData, data);
    }
  } catch (error) {
    console.error('解析营业时间数据失败:', error);
  }
};

watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    parseValue(newVal);
  }
}, { immediate: true });

onMounted(() => {
  if (props.modelValue) {
    parseValue(props.modelValue);
  }
});
</script>

<style lang="scss" scoped>
.business-hours-editor {
  .mode-selector {
    margin-bottom: 20px;
  }

  .time-group, .day-group {
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }

  .group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .group-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
  }

  .time-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .time-separator {
    font-size: 14px;
    color: var(--text-color-secondary);
  }

  .uni-easyinput {
    flex: 1;
  }
}
</style>